<template>
  <div class="app-container">
    <!--  Search  -->
    <ai-tool-search
        v-model:query="query"
        :dict-data="dictData"
        :load-data="loadData"
        :reset-query="resetQuery"
    />
    <!--  Table  -->
    <ai-tool-table
        v-model:query="query"
        :data-list="dataList"
        :dict-data="dictData"
        :load-data="loadData"
        :loading="loading"
        :total="total"
    />
  </div>
</template>

<script lang="ts" setup>
import {AiToolPageQuery, AiToolPageVO} from "@/api/ai/manage/tool/type";
import {AiToolAPI} from "@/api/ai/manage/tool";
import {useDataLoader} from "@/hooks/useDataLoader";
import {useDictionary} from "@/hooks/userDict";
// 组件定义
defineOptions({
  name: "AiTool",
  inheritAttrs: false,
});
// 公共数据 & 方法
const initialQuery: AiToolPageQuery = {
  componentType: undefined,
  name: undefined,
  description: undefined,
  provider: undefined,
  isActive: undefined,
  pageNum: 1,
  pageSize: 10
}                       // 初始化查询条件
// hooks
const {
  query,
  dataList,
  total,
  loading,
  loadData,
  resetQuery
} = useDataLoader<AiToolPageVO, AiToolPageQuery>(AiToolAPI.PAGE.request, initialQuery);
const dictData = await useDictionary(['ai_tool_type']); // 字典数据
// 数据

// 方法

// 生命周期
onMounted(async () => {
  await loadData()
})
</script>

<style lang="scss" scoped>
/* 样式 */
</style>
